<template>
  <el-card shadow="never" class="box-card" style="margin-top: 10px">
    <el-form class="demo-form-inline" label-position="top">
      <el-form-item label="审批进度" prop="">
        <el-card shadow="never">
          <div v-loading="loading">
            <p>
              <el-tag type="success" style="margin-right: 5px">已审批</el-tag>
              <el-tag type="warning" style="margin-right: 5px">已审批-驳回</el-tag>
              <el-tag type="danger" style="margin-right: 5px">审批中</el-tag>
              <el-tag type="info" style="margin-right: 5px">待审批</el-tag>
            </p>
            <el-steps direction="vertical">
              <el-step
                :title="item.nodeName"
                v-for="(item, index) in nodeUsers"
                :key="index"
                :status="
                  item.handleType == 0
                    ? 'success'
                    : item.handleType == 5
                    ? 'process'
                    : 'wait'
                "
              >
                <div slot="description">
                  <el-tag
                    :type="
                      user.handleType == 0
                        ? 'success'
                        : (user.handleType == 5
                        ? 'danger'
                        : (user.handleType == 1
                        ? 'warning'
                        : 'info'))
                    "
                    style="margin-right: 5px"
                    v-for="(user, userIndex) in item.handleUsers"
                    :key="userIndex"
                    >{{ user.name }}</el-tag
                  >

                  <span
                    v-if="item.readOnlyUsers && item.readOnlyUsers.length > 0"
                    >抄送：</span
                  >
                  <el-tag
                    style="margin-right: 5px"
                    v-for="(user, userIndex) in item.readOnlyUsers"
                    :key="userIndex"
                    >{{ user.name }}</el-tag
                  >
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-card>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      oldFormData: "",
      nodeUsers: [
        // {
        //   nodeId: "581faa20-5417-fa90-7043-a3ef5886aaca",
        //   nodeName: "开始",
        //   users: [
        //     {
        //       handleType: null,
        //       id: "5",
        //       name: "用户2",
        //     },
        //   ],
        //   level: 1,
        //   handleType: null,
        // },
        // {
        //   nodeId: "0934fb9d-c06b-46c6-a55d-93276dc284d0",
        //   nodeName: "普通",
        //   users: [
        //     {
        //       handleType: null,
        //       id: "5",
        //       name: "用户2",
        //     },
        //     {
        //       handleType: null,
        //       id: "4",
        //       name: "用户 1",
        //     },
        //   ],
        //   level: 2,
        //   handleType: null,
        // },
        // {
        //   nodeId: "0fcf5bd2-7ddb-a40e-086f-c412b576f85d",
        //   nodeName: "部长确认",
        //   users: [
        //     {
        //       handleType: null,
        //       id: "1006",
        //       name: "仁兄",
        //     },
        //   ],
        //   level: 3,
        //   handleType: null,
        // },
        // {
        //   nodeId: "ef53051d-25e5-6e47-f0e4-cdf3dee2f1b2",
        //   nodeName: "结束",
        //   users: [
        //     {
        //       handleType: null,
        //       id: "5",
        //       name: "用户2",
        //     },
        //   ],
        //   level: 4,
        //   handleType: null,
        // },
      ],
    };
  },
  props: {
    taskId: {
      type: String,
      default: "",
    },
    workflowInfo: {
      type: Object,
      default: () => {
        return {
          workflowId: "",
          versionNo: "",
          FormData: "",
        };
      },
    },
  },
  watch: {
    taskId: {
      handler() {
        this.onTaskIdChange();
      },
      deep: true,
    },
    workflowInfo: {
      handler() {
        this.onWorkflowInfoChange();
      },
      deep: true,
    },
  },
  mounted() {
    this.onTaskIdChange();
    this.onWorkflowInfoChange();
  },
  methods: {
    onTaskIdChange() {
      if (this.taskId && this.taskId.length > 0) {
        this.getForecastNodeUsers4Task(this.taskId);
      }
    },
    onWorkflowInfoChange() {
      if (
        this.workflowInfo.workflowId &&
        this.workflowInfo.workflowId.length > 0
      ) {
        this.getForecastNodeUsers4Workflow(this.workflowInfo);
      }
    },
    getForecastNodeUsers4Workflow(workflowInfo) {
      if (this.oldFormData == workflowInfo.formData) return;
      this.oldFormData = workflowInfo.formData;
      this.loading = true;
      this.$store
        .dispatch("workflow/getForecastNodeUsers4Workflow", workflowInfo)
        .then((res) => {
          this.nodeUsers = res;
          this.loading = false;
        });
    },
    getForecastNodeUsers4Task(taskId) {
      this.loading = true;
      this.$store
        .dispatch("workflow/getForecastNodeUsers4Task", { taskId })
        .then((res) => {
          this.nodeUsers = res;
          this.loading = false;
        });
    },
  },
};
</script>
